<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>
    什么是生命周期函数？

    https://cn.vuejs.org/v2/guide/instance.html#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%9B%BE%E7%A4%BA

    每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM
    等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

    生命周期函数指的是框架提供了一系列特定的函数，用户只需要在这些特定的函数里面书写好自己的代码即可，框架会自动在特定的时间进行调用。

</p>

<p>
    为什么要有生命周期函数？

    主要是给开发者在不同阶段添加自己的代码的机会。来实现自己的业务代码。

</p>
<p>
    生命周期函数有哪些？

    beforeCreate
    created
    beforeMount
    mounted
    beforeUpdate
    updated
    activated
    deactivated
    beforeDestroy
    destroyed
    errorCaptured

    下图展示了实例的生命周期。你不需要立马弄明白所有的东西，不过随着你的不断学习和使用，它的参考价值会越来越高。


</p>
<div id="app">
    <h1>{{ title }}</h1>
</div>

</body>
<script src="./lib/vue.js"></script>
<script type="text/javascript">
    /*
    * 在开发中，一般我们都是做的前后端分离的项目，那么我们一般在这些生命周期函数里面进行网络请求，调用后端的接口，获取数据，然后进行渲染。
    *
    * */
    var vm = new Vue({
        el: '#app',
        data: {
            title: 'hi vuejs!',
        },
        beforeCreate: function () {
            console.log('beforeCreate', this.$data);

        },
        /*created beforeMount mounted 这三个生命周期函数里面都可以获取到data数据，那么我们可以在这三个里面进行网络请求，调用后台接口进行数据的获取。 */
        created: function () {
            console.log('created', this.$data);

        },
        beforeMount: function () {
            console.log('beforeMount', this.$data);

        },
        mounted: function () {
            console.log('mounted', this.$data);

        },
        beforeUpdate: function () {
            console.log('beforeUpdate');
        },
        updated: function () {
            console.log('updated');
        }
    });
</script>

</html>
